<template>
	<view class="page-content-box">
		<view class="comment-description" >
			<view class="title">
				桌台：{{orderInfo.tableCode}}
			</view>
			<view class="time">
				时间：{{orderInfo.createdate}}
			</view>
			<view class="order-list-box" v-for="(item,index) in goodsList" :key="index">
				<view class="order-detail flex-block-row">
					<view class="img-box">
						<image style="width: 120rpx; height: 120rpx;border-radius: 10rpx;" mode="aspectFill" :src="baseUrl+'/api/sys/file/download?attachId=' + item.coverImgId+'&width=300'"></image>
					</view>
					<view class="detail-box">
						<view class="name txt-ellipsis">{{item.cookName}}</view>
						<view class="num">数量： × {{item.count}}</view>
					</view>
				</view>
			</view>
			<view class="order-list-box" v-for="(item,index) in goodsListAdd" :key="index">
				<view class="order-detail flex-block-row">
					<view class="img-box">
						<image style="width: 120rpx; height: 120rpx;border-radius: 10rpx;" mode="aspectFill" :src="baseUrl+'/api/sys/file/download?attachId=' + item.coverImgId+'&width=300'"></image>
					</view>
					<view class="detail-box">
						<view class="name txt-ellipsis">{{item.cookName}}</view>
						<view class="num">数量： × {{item.count}}</view>
					</view>
				</view>
			</view>
			<view class="order-list-box" v-for="(item,index) in goodsListDel" :key="index">
				<view class="order-detail flex-block-row">
					<view class="img-box">
						<image style="width: 120rpx; height: 120rpx;border-radius: 10rpx;" mode="aspectFill" :src="baseUrl+'/api/sys/file/download?attachId=' + item.coverImgId+'&width=300'"></image>
					</view>
					<view class="detail-box">
						<view class="name txt-ellipsis">{{item.cookName}}</view>
						<view class="num">数量： × {{item.count}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="comment-star">
			    <view class="star-pos" style="display:flex;flex-direction:row;">
					<view class="eval-title">星级评价：</view>
					<view v-for="num in numList" :key="num" :class="item.flag>=num? 'on stars-box': 'stars-box'" @click="changeColor(num,index)">
						<view class="stars"></view>
					</view>
					<view class="eval-text">{{evaluateArr[item.flag-1]}}</view>
			    </view>
			</view> -->
			<!--文本域  -->
			<view class="star-title">
			    <view class="star-content">
			    <!--  <textarea class="weui-textarea" bindinput="bindTextAreaChange" placeholder="我要提出建议..." style="height: 8em" value="{{info}}" maxlength="{{noteMaxLen}}" focus /> -->
			    	<textarea  :data-index="index" class="star-textarea" :show-confirm-bar="false" cursor-spacing="20" placeholder-class="input-place" :maxlength="noteMaxLen" placeholder="请输入客人用餐反馈" v-model="feedbackRemark"/>
			    	<view class="star-counter">{{noteMaxLen}}</view>
			    </view>
			</view>
			<!-- <view class="upload-content">
				<view class="upload-image-box flex-block-row">
					<view class="image-box" v-for="(child,idx) in item.imgList" :key="idx" @tap="viewImage" :data-index="index" :data-idx="idx">
						<image style="width: 120rpx; height: 120rpx;" :src="baseUrl + item.imgList[idx]" mode="aspectFill"></image>
						<view class="close-icon-box" @tap.stop="delImg" :data-index="index" :data-idx="idx">
							<image style="width: 34rpx; height: 34rpx;" mode="aspectFit" src="../../static/dele.png"></image>
						</view>
					</view>
					<view class="upload-btn-box" v-if="item.imgList.length<4">
						<button plain="true" class="upload-btn" @tap="chooseImage(index)"><image style="width: 120rpx; height: 120rpx;" mode="aspectFit" src="../../static/update.png"></image></button>
					</view>
				</view>
			</view> -->
		</view>
		<!--发布按钮  -->
		<view class="public-btn-box">
			<button class="public-btn" @click="bindSubmitEval">提交用餐反馈</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:this.$client.IMG_URL,
				noteMaxLen: 200, // 最多放多少字
				evaluateArr: ['非常差', '差', '一般', '好', '非常好'],
				goodsList:[],
				numList:[1,2,3,4,5],
				orderInfo:{},
				goodsListAdd:[],
				goodsListDel:[],
				feedbackRemark:''
			}
		},
		onLoad(options) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#fda600'
			})
			this.orderInfo = JSON.parse(options.goodsList);
			this.feedbackRemark=this.orderInfo.feedback
			this.$nextTick(()=>{
				this.getInitData()
			})
			//console.log(this.goodsList);
		},
		methods: {
			getInitData(){
				var _this = this;
				_this.$loading(); 
				this.hasLoad = false;
				this.$client.get('/api/biz/order/getModelEx', {id:this.orderInfo.icode}, function(res,message){
					
					_this.goodsList = res.listDetail;
					_this.goodsListAdd=res.listDetailAdd
					_this.goodsListDel=res.listDetailDelete
					_this.$loading(false); 
					_this.hasLoad = true;
				},function(res){
					_this.$loading(false); 
					_this.hasLoad = true;
				},true);
			},
			
			// 提交清空当前值
			bindSubmitEval() {
				var _this = this;
				var length = this.goodsList.length;
				//console.log(this.goodsList)
				
					uni.showLoading({
					    title: '加载中...'
					});
					var params={
						id:this.orderInfo.icode,
						feedback:this.feedbackRemark,
					}
					//console.log(item);
					_this.$client.post('/api/biz/order/feedback', params, function(res,message){
						uni.hideLoading();
						_this.$util.showToast({title:message});
						
							setTimeout(function(){
								uni.navigateBack({
									delta: 1
								})
							},1000);
						
					},function(res){
						uni.hideLoading();
						if(res){
							_this.$util.showToast({title:res});
						}
					},true);
				
				
			},
			changeColor(num,index){
				//console.log(num);
				this.goodsList[index].flag = num;
				this.$forceUpdate();
			},
			//选择图片
			chooseImage(index) {
				var _this = this;
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						if(res.tempFiles[0].size > 10 * 1024 * 1000){  //上传图片大小限制
							_this.$util.showToast({title:"照片大小不能10MB"});
							return
						}
						/* if (_this.goodsList[index].imgList.length != 0) {
							_this.goodsList[index].imgList = _this.goodsList[index].imgList.concat(res.tempFilePaths)
						} else {
							_this.goodsList[index].imgList = res.tempFilePaths
						} */
						//console.log(res.tempFilePaths[0]);
						var key = uni.getStorageSync("key") || '';
						var secret = uni.getStorageSync("secret") || '';
						var timestamp = Math.round(new Date().getTime()/1000).toString();
						var sign = _this.$util.getSign({},timestamp,key,secret);
						uni.uploadFile({
							url: _this.$client.API_URL+'/api/upload/userimages', 
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {}, 
							header:{key:key,sign:sign,timestamp:timestamp},
							success: (res) => {
								//console.log(res.data);
								var data = JSON.parse(res.data)
								_this.goodsList[index].imgList.push(data.data.file_url);
								//console.log(_this.goodsList[index].imgList)
								_this.$forceUpdate();
							}
						});
					}
				});
			},
			//预览图片
			viewImage(e) {
				var index = e.currentTarget.dataset.index;
				var img_list = this.goodsList[index].imgList;
				var view_list = [];
				img_list.forEach(item => {
					view_list.push(this.baseUrl + item);
				})
				uni.previewImage({
					urls: view_list,
					current: e.currentTarget.dataset.idx
				});
			},
			//删除图片
			delImg(e) {
				var _this = this;
				var index = e.currentTarget.dataset.index;
				var idx = e.currentTarget.dataset.idx;
				uni.showModal({
					title: '提示',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					cancelColor:'#666666',
					confirmColor:'#fda600',
					success: function (res) {
						if (res.confirm) {
							_this.goodsList[index].imgList.splice(idx, 1);
							_this.$forceUpdate();
						}
					}
				})
			}
		}
	}
</script>

<style>
.page-content-box{
	padding: 20rpx;
	box-sizing: border-box;
}
.comment-description{
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	box-sizing: border-box;
}
.comment-description+.comment-description{
	margin-top: 20rpx;
}
.order-list-box{
	
}
.order-detail .img-box{
	width: 120rpx;
	height: 120rpx;
}
.order-detail .detail-box{
	width: 550rpx;
	padding-left: 20rpx;
	box-sizing: border-box;
}
.order-detail .detail-box .name{
	font-size:32rpx;
	font-family:PingFang SC;
	color:rgba(22,22,22,1);
	line-height: 60rpx;
}
.order-detail .detail-box .num{
	font-size:28rpx;
	font-family:PingFang SC;
	line-height: 50rpx;
	color:rgba(153,153,153,1);
}
.comment-star{
  padding:30rpx 0;
  display:flex;
  flex-direction:row;
}
.eval-title{
	font-size:28rpx;
	color: #161616;
	line-height: 50rpx;
}
.eval-text{
	font-size:24rpx;
	font-weight:bold;
	color: #fda600;
	margin-left: 56rpx;
	line-height: 50rpx;
}
.star-pos{
	height: 50rpx;
	line-height: 50rpx;
	padding: 20rpx 0;
}
.stars-box{
	padding: 0 10rpx;
}
.stars-box .stars{
    background:url('../../static/star2.png');
    width: 42rpx;
    height: 40rpx;
    background-size: 42rpx 40rpx;
    transition: 200ms;
}
.on .stars{
    background:url("../../static/star.png");
    width: 42rpx;
    height: 40rpx;
    background-size: 42rpx 40rpx;
    transition: 500ms;
    transform: scale(1,1)
}
.star-content{
	background:rgba(248,248,248,1);
	border-radius:10rpx;
	overflow: hidden;
}
.star-textarea{
	width: 100%;
	height: 200rpx;
	font-size:28rpx;
	color:rgba(22,22,22,1);
	padding: 20rpx;
	box-sizing: border-box;
	line-height: 30rpx;
}
.input-place{
	line-height: 30rpx;
}
.star-counter{
	font-size:20rpx;
	font-family:PingFang SC;
	font-weight:bold;
	color:rgba(153,153,153,1);
	text-align: right;
	padding-right: 20rpx;
	padding-bottom: 20rpx;
}
.star-title{
  width: 100%;
}
.upload-content{
	width: 100%;
	background-color: #fff;
	margin-top: 20rpx;
}
.upload-content .upload-btn{
	border: none;
	display: inline-block;
	width: 120rpx;
	height: 120rpx;
}
.upload-image-box{
	justify-content: flex-start;
}
.upload-image-box .image-box{
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
	position: relative;
	margin-right: 40rpx;
}
.upload-image-box .image-box .close-icon-box{
	width: 34rpx;
	height: 34rpx;
	position: absolute;
	left: auto;
	top: -16rpx;
	right: -18rpx;
}
.upload-image-box .upload-btn-box{
	width: 120rpx;
	height: 120rpx;
}
.flex-block-row{
	margin-bottom: 20rpx;
}
.title{
	display: flex;
	flex-direction: row;
	justify-content: center;
	font-size: 30rpx;
	font-weight: bold;
}
.time{
	display: flex;
	flex-direction: row;
	justify-content: center;
	font-size: 26rpx;
	font-weight: bold;
}
</style>
